<template>
    <view class="page-wrap">
        <scroll-view class="page-view" :style="{'padding-top': loading ? '0' : '10px'}" scroll-y>
            <no-data class="no-data" v-if="!dataTables.length"></no-data>
            <template v-else>
                <template v-if="pageType == 'default'">
                    <block v-for="(item, index) in dataTables" :key="item.deviceId">
                        <device-item class="ble-item" :deviceData="item" :index="index" @handlerClick="itemClick"></device-item>
                    </block>
                </template>
            </template>
        </scroll-view>
    </view>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
import $showModal from '@/static/js/show-modal.js'
import notifyValueChange from '@/static/js/ble-handler/notify-valueChange'
import noData from '@/components/common/data-empty'
import deviceItem from '@/components/ble-item/ble-item'
export default {
    props: {
        id: String,
        loading: Boolean
    },
    components: {
        noData,
        deviceItem
    },
    computed: {
        ...mapState('read-tag', {
            pageType: 'pageType', // 页面类型
            checkCode: 'checkCode', // 查询码
            devicesList: 'devicesList', // 设备列表（无查询码）
            codeDeviceList: 'codeDeviceList', // 设备列表（有查询码）
            isAfresh: 'isAfresh' // 是否需要刷新（查询后关闭）TODO 删除待确定
        }),
        ...mapState('details', {
            readList: 'readList' // 蓝牙读取列表
        }),
        // 数据
        dataTables() {
            const list = this.devicesList
            let resList = [...list]
            switch (this.id) {
                // 超标
                case 'excess':
                    resList = list.filter(item => item.excessiveValue)
                    break
                // 已读取
                case 'read':
                    resList = list.filter(item => item.readState == '1')
                    break
                // 未读取
                case 'unread':
                    resList = list.filter(item => !item.readState)
                    break
            }
            return resList
        }
    },
    data() {
        return {
            
        }
    },
    methods: {
        // 设备列表点击
        itemClick(data) {
            const list = this.readList
            const arr = list.filter(item => item.mid == data.mid)
            const type = arr.length ? 1 : 0 // 0 读取， 1 查看
            $showModal({
                showTitle: false,
                content: '读取设备',
                confirmText: type ? '查看' : '确定',
                cancelText: type ? '读取' : '取消'
            }).then(res => {
                if (type) {
                    console.log('查看数据')
                    this.$store.dispatch('details/detailsDataHandler', arr[0])
                    uni.navigateTo({
                        url: `/pages/read-details/read-details?id=${arr[0].mid}`,
                        animationType: 'slide-in-right'
                    })
                } else {
                    console.log('读取数据')
                    notifyValueChange(data)
                }
            }).catch(() => {
                if (type) {
                    console.log('读取数据')
                    notifyValueChange(data)
                }
            })
        }
    }
}
</script>

<style scoped>
.page-wrap {
    flex: 1;
    flex-direction: column;
}
.no-data {
    flex: 1;
    z-index: 10;
}
.page-wrap, .no-data, .page-view {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.page-view {
    position: absolute;
    padding-left: 20rpx;
    padding-right: 20rpx;
    /* #ifndef APP-NVUE */
    display: flex;
    flex-direction: column;
    /* #endif */
    /* #ifndef MP-ALIPAY */
    flex-direction: column;
    /* #endif */
}
</style>